
<template>
  <view class="container">
    <!-- 图片展示 -->
    <view class="shop-image">
      <image 
		v-if:="currentShop.storeImage"
        :src="currentShop.storeImage" 
        mode="widthFix" 
		class="shop-img"
      />
      <text v-else class="image-placeholder">暂无店铺图片</text>
    </view>

    <!-- 基础信息 -->
    <view class="base-info">
      <view class="header">
        <text class="title">{{ currentShop.storeName }}</text>
      </view>
      
      <view class="meta">
        <view class="rating">
          <uni-rate :value="currentShop.score" size="14" color="#ffd700" margin="2" readonly/>
          <text class="score">{{ currentShop.score?.toFixed(1) || '0.0' }}</text>
        </view>
        <text class="sales">已服务{{ currentShop.orderCount }}单</text>
      </view>

      <view class="info-row">
        <uni-icons type="time" size="14" color="#666"/>
        <text>营业时间：{{ currentShop.businessHours || '09:00-18:00' }}</text>
      </view>

      <view class="info-row">
        <uni-icons type="location" size="14" color="#666"/>
        <text class="address">{{ currentShop.address }}</text>
      </view>
    </view>

    <!-- 服务项目 -->
    <view class="service-section">
      <text class="section-title">服务项目</text>
      <view 
        class="service-item" 
        v-for="(service, index) in currentShop.services" 
        :key="index"
      >
        <text class="name">{{ service.serviceName }}</text>
        <view class="price">
          <text class="current">¥{{ service.currentPrice }}</text>
          <text class="original" v-if="service.originalPrice">¥{{ service.originalPrice }}</text>
        </view>
      </view>
    </view>

    <!-- 用户评价 -->
    <view class="review-section">
      <text class="section-title">用户评价（{{ reviews.length }}）</text>
      <view 
        class="review-item" 
        v-for="(review, index) in reviews" 
        :key="index"
      >
        <image class="avatar" :src="review.userAvatar" mode="aspectFit"/>
        <view class="content">
         <view class="header">
                <text class="name">{{ review.memberName }}</text>
            <view class="rating-box">
                <uni-rate :value="review.rating" size="12" color="#ffd700" margin="2" readonly/>
                <text class="time">{{ formatDate(review.reviewTime) }}</text>
            </view>
        </view>
          
          <text class="text">{{ review.content }}</text>
		  <image :src="review.image" mode="aspectFill" class="review-image"/>
        </view>
      </view>
    </view>

    <!-- 预约按钮 -->
    <view class="footer">
      <button class="book-btn" @click="handleBooking">立即预约</button>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

// 响应式数据
const storeId = ref('')
const storeInfo = ref({})
const reviews = ref([])
const loading = ref(true)

// 合并后的店铺数据
const currentShop = computed(() => ({
  storeName: '加载中...',
  score: 4.5,
  orderCount: '',
  address: '',
  businessHours: '',
  services: [],
  ...storeInfo.value
}))

// 加载店铺详情
const fetchStoreDetail = async () => {
  try {
    const { data: res } = await uni.request({
      url: `http://localhost:9587/repairCar/Storelist/${storeId.value}`,
      method: 'GET'
    })
    
    if (res.rows?.length > 0) {
      storeInfo.value = {
        ...res.rows[0],
        services: res.rows[0].serviceItems?.map(item => ({
          serviceName: item.serviceName,
          currentPrice: item.currentPrice,
          originalPrice: item.originalPrice
        })) || []
      }
    }
  } catch (error) {
    uni.showToast({ title: '店铺信息加载失败', icon: 'none' })
  }
}

// 加载用户评价
const fetchReviews = async () => {
  try {
    const { data: res } = await uni.request({
      url: `http://localhost:9587/repairCar/orderList/${storeId.value}`,
      method: 'GET'
    })
    
    reviews.value = res.rows?.map(order => ({
		// 合并评价信息和用户信息
      ...order.review,
      userAvatar: order.member?.avatar,
	  memberName: order.member?.memberName
	  
    })) || []
  } catch (error) {
    uni.showToast({ title: '评价加载失败', icon: 'none' })
  }
}

// 日期格式化方法
const formatDate = (timeStr) => {
  if (!timeStr) return ''
  // 处理带T的时间格式（如：2023-10-05T08:30:00）
  return timeStr.split('T')[0].replace(/-/g, '.') 
}
// 页面加载
onLoad(async (options) => {
  if (!options.id) {
    uni.showToast({ title: '参数错误', icon: 'none' })
    return
  }
  
  //获取传入的门店id
  storeId.value = options.id
  await Promise.all([fetchStoreDetail(), fetchReviews()])
  loading.value = false
})

const handleBooking = () => {
  uni.navigateTo({
    url: `/pages/booking/booking?storeId=${storeId.value}`
  })
}
</script>
<style scoped>
.container {
  padding: 20rpx;
  padding-bottom: 100rpx;
}

.shop-image {
  width: 100%;
  height: 300rpx;
  background: #f5f5f5;
  border-radius: 8rpx;
  overflow: hidden;
}

.rating-box {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.review-image {
  width: 100%;
  height: 120px;
  border-radius: 8px;
  margin-top: 8px;
}

.shop-img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持比例填充容器 */
}

.image-placeholder {
  color: #999;
  font-size: 28rpx;
}

.base-info {
  padding: 20rpx 0;
  border-bottom: 1rpx solid #eee;
}

.header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20rpx;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
}

.distance {
  color: #666;
}

.meta {
  display: flex;
  align-items: center;
  margin: 20rpx 0;
}

.rating {
  display: flex;
  align-items: center;
  margin-right: 30rpx;
}

.score {
  color: #ff9000;
  margin-left: 10rpx;
}

.sales {
  color: #666;
}

.info-row {
  display: flex;
  align-items: center;
  margin: 15rpx 0;
  color: #666;
}

.address {
  max-width: 500rpx;
}

.service-section {
  padding: 30rpx 0;
  border-bottom: 1rpx solid #eee;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  display: block;
  margin-bottom: 20rpx;
}

.service-item {
  display: flex;
  justify-content: space-between;
  padding: 20rpx 0;
}

.price {
  display: flex;
  align-items: baseline;
}

.current {
  color: #e93b3b;
  font-size: 32rpx;
}

.original {
  color: #999;
  font-size: 24rpx;
  text-decoration: line-through;
  margin-left: 15rpx;
}

.review-section {
  padding: 30rpx 0;
}

.review-item {
  display: flex;
  padding: 20rpx 0;
}

.avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}

.content {
  flex: 1;
}

.header {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}

.name {
  margin-right: 20rpx;
}

.time {
  color: #999;
  font-size: 24rpx;
  margin-bottom: 10rpx;
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  padding: 20rpx;
  box-shadow: 0 -2rpx 8rpx rgba(0,0,0,0.05);
}

.book-btn {
  background: #007AFF;
  color: #fff;
  border-radius: 50rpx;
}
</style>